<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>菜单管理</title>
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<div class="x-nav" style="background-color: white;">
          <span class="layui-breadcrumb">
            <a href="/admin">首页</a>
            <a href="#">权限管理</a>
            <a>
              <cite>菜单管理</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<div class="layui-row layui-col-space5">
  <div class="layui-col-md4" style="padding: 15px 10px; font-size: 16px;">
    <div class="layui-row">
      当前选中：<b id="this-click" style="color: red;"></b>
      <button type="button" class="layui-btn layui-btn-sm" style="float: right;" onclick="add()">
        <i class="layui-icon">&#xe608;</i> 添加菜单
      </button>
    </div>
    <div class="layui-row">
      <div id="tree-menu"></div>
    </div>
  </div>
  <div class="layui-col-md8">
    <div class="layui-col-md12" style="border-left: 2px solid red;padding: 15px 5px">
      <h2 style="text-align: center">修改菜单</h2>
      <div class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">上级菜单</label>
          <div class="layui-input-inline">
            <input type="text" id="pidName" placeholder="上级菜单" disabled class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">菜单名字</label>
          <div class="layui-input-block" style="width: 70%;">
            <input name="id" id="id" type="hidden">
            <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入菜单名字" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">菜单URL</label>
          <div class="layui-input-block">
            <input type="text" id="href" name="href" lay-verify="required" placeholder="请输入菜单URL"
                   autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">菜单图标</label>
          <div class="layui-input-block">
            <i style="font-size: 35px;" class="layui-icon" id="iconShow"></i>
            <input type="hidden" name="icon" id="icon">
            <button style="margin-left: 40px;" type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="select()">
              选择图标
            </button>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">排序id</label>
          <div class="layui-input-inline">
            <input type="text" id="sortId" name="sortId" lay-verify="required|number"
                   placeholder="排序id" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">越小越靠前，例如1、2、3 ... 100、233</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">菜单状态</label>
          <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="有效">
            <input type="radio" name="status" value="0" title="无效">
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">菜单描述</label>
          <div class="layui-input-block">
            <textarea name="description" id="description" placeholder="请输入菜单描述" class="layui-textarea"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveSubmit" id="save">保存提交</button>
            <button onclick="del()" class="layui-btn layui-btn-danger">删除当前节点</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>


</body>
<script>
  var thisId, nowId, form
  layui.use(['tree', 'form', 'layer', 'jquery'], function () {
    var tree = layui.tree;
    form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;

    form.on('submit(saveSubmit)', function (data) {
      if ($('#pidName').val() == '') {
        layer.msg('请先选择一个上级菜单')
        return false;
      }
      if (thisId == 0) {
        layer.msg('不能选择根目录菜单进行更新！')
        return false;
      }
      $.ajax({
        data: JSON.stringify(data.field),
        url: '/admin/menu/update',
        contentType: "application/json; charset=utf-8",
        type: 'post',
        success: function (data) {
          layer.msg(data.message)
        }
      })
      return false;
    });

    $(function () {
      $.ajax({
        url: '/admin/menu/tree',
        success: function (data) {
          //加一级根目录
          var tr = listToTree(data.data, -1)
          console.log(tr)
          //渲染
          var inst1 = tree.render({
            elem: '#tree-menu'  //绑定元素
            , data: tr
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
              $('#this-click').html(obj.data.title)
              $('#pidName').val(obj.data.title)
              thisId = obj.data.id
              info(thisId)
            }
          });
        }
      })
    })
  });

  function del() {
    if ($('#pidName').val() == '') {
      layer.msg('请先选择一个要删除的菜单')
      return false;
    }
    if (thisId == 0) {
      layer.msg('不能删除根目录菜单')
      return false;
    }
    layer.confirm('是否要删除当前菜单？确认后当前菜单及其下级菜单均被删除！', {icon: 7, title: '警告'}, function (index) {
      $.ajax({
        data: {"id": thisId},
        url: '/admin/menu/delete',
        type: 'post',
        sync: false,
        success: function (data) {
          layer.msg(data.message)
          if (data.code == 0) {
            window.setTimeout(function () {
              window.location.reload()
            }, 1200)
          }
        }
      })
      layer.close(index);
    });
  }

  function add() {
    xadmin.open('添加菜单', '/admin/menu/add')
  }

  function info(id) {
    if (id != 0) {
      nowId = thisId
      $.ajax({
        data: {"id": id},
        url: '/admin/menu/info',
        success: function (data) {
          setInfo(data.data)
        }
      })
    }
  }

  function setInfo(data) {
    $('#id').val(data.id)
    $('#name').val(data.name)
    $('#description').val(data.description)
    $('#href').val(data.href)
    $('#icon').val(data.icon)
    $('#iconShow').html(data.icon)
    $('#sortId').val(data.sortId)
    $("input:radio[value='" + data.status + "']").attr('checked', 'true');
    form.render();
  }

  function select() {
    xadmin.open('选择图标', '/admin/menu/selectIcon')
  }

  //供子页面调用
  function setIcon(icon) {
    $('#icon').val(icon)
    $('#iconShow').html(icon)
  }

  function listToTree(list, pid) {
    return list.filter(item => {
      if (item.pid === pid) {
        item.children = listToTree(list, item.id)
        return true
      }
      return false
    })
  }
</script>
</html>
